<template>

  <div class="block">
    <el-calendar v-model="value" v-on:click="changeData()"></el-calendar>

    <div class="radio">
      排序：
      <el-radio-group v-model="reverse">
        <el-radio :label="false">正序</el-radio>
        <el-radio :label="true">倒序</el-radio>
      </el-radio-group>
    </div>

    <el-timeline :reverse="reverse">
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :timestamp="activity.timestamp">
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>

  </div>

</template>

<script>
export default {
  name: "CalendarLog",
  data() {
    return {
      //日历的日期
      value: new Date(),
      //时间线的
      reverse: false,
      activities: [{
        content: '上班',
        timestamp: '2024-10-17 08:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '上班',
        timestamp: '2024-10-17 08:50',
        color: '#0bbd87'
      }, {
        content: '下班',
        timestamp: '2024-10-17 17:46',
        size: 'large'
      }, {
        content: '下班',
        timestamp: '2024-10-17 18:46'
      }]
    }
  },
  watch: {
    // 监听message数据的变化
    value(newValue, oldValue) {
     console.log(newValue);
     console.log(oldValue);
     this.activities=[{
        content: '上班',
        timestamp: '2024-10-21 08:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '上班',
        timestamp: '2024-10-21 08:50',
        color: '#0bbd87'
      }, {
        content: '下班',
        timestamp: '2024-10-21 17:46',
        size: 'large'
      }, {
        content: '下班',
        timestamp: '2024-10-21 18:46'
      }]
    }
  },
  methods: {
   //方法
  }
}
</script>

<style scoped>

</style>

<!--Timeline Attributes-->
<!--参数	说明	类型	可选值	默认值-->
<!--reverse	指定节点排序方向，默认为正序	boolean	—	false-->
<!--¶Timeline-item Attributes-->
<!--参数	说明	类型	可选值	默认值-->
<!--timestamp	时间戳	string	-	—-->
<!--hide-timestamp	是否隐藏时间戳	boolean	—	false-->
<!--placement	时间戳位置	string	top / bottom	bottom-->
<!--type	节点类型	string	primary / success / warning / danger / info	- -->
<!--color	节点颜色	string	hsl / hsv / hex / rgb	- -->
<!--size	节点尺寸	string	normal / large	normal-->
<!--icon	节点图标	string	—	- -->
